

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品展示</title>
    <style>
        body {
            background-image: url("MAIN10.jpeg"); /* 设置背景图片的URL */
            /*background-color: saddlebrown;*/
            background-repeat: no-repeat; /* 不重复平铺背景yo图片 */
            background-size: cover;}/* 调整背景图片大小以适应页面 */

        /*
        display	        指定 HTML 元素盒子类型。
        flex-direction	指定了弹性容器中子元素的排列方式
        justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
        align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
        flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
        align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
        flex-flow	flex-direction 和 flex-wrap 的简写
        order	        设置弹性盒子的子元素排列顺序。
        align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
        flex	        设置弹性盒子的子元素如何分配空间。
        */

        /*存放所有商品区域*/
        .product-container {
            position: fixed;left: 50px;width: 1500px; height: 750px;
            display: flex;
             /*弹性盒子*/
            flex-direction: row;/*决定弹性盒子主轴的方向——水平，起点在左端*/
            justify-items: flex-start;
            justify-content: flex-start; /*交叉轴的起点对齐。*/
            /*justify-content:center; !*横轴的中点对齐。*!*/
            align-items:flex-start;/*纵轴方向上的对齐方式*/
            align-content: flex-start;;
            background-color: saddlebrown;
            vertical-align: top;
            /*opacity:0.7;*/
        }

        .product-item {
            /*width: 1470px;height: 750px;*/
            /*flex-basis: 10%;!*商品盒子尺寸*!*/
            width:500px;
            height:150px;
            text-align: center; /*文本居中*/
            box-sizing: border-box;/*标准盒子模型，一般浏览器也都默认为标准盒子模型*/
            padding: 10px;/*该盒子内元素的内边距，即元素内部与其边框的距离*/
            background: white;
            border-radius: 15%;/*边框圆角度*/
        }
        .center {
              display: flex;
              justify-content: center;
          }

    </style>

</head>
<body>

<h1>商品展示</h1>

<div class="product-container" style="border-radius: 5%;">
<table >
    <c:forEach var="shop" items="${shops}" >
<%--        var：迭代参数的名称。在迭代体中可以使用的变量的名称，用来表示每一个迭代变量。--%>
<%--        varStatus="status"——varStatus：迭代变量的名称，用来表示迭代的状态，*** 可以访问到迭代自身的信息。***--%>
        <tr style="width: 50px;height: 50px">
            <td  class="product-item" rowspan="6" colspan="2"><img src="${shop.url}" alt="商品图片" width=130px height=100px>
             <p>  ${shop.product}</p>
             <p>  ${shop.price}元</p>
            </td>
        </tr>
    </c:forEach>

</table>
</div >

<br>
    <br>
<%--商品分页区域--%>
<%int page1 = (int) request.getAttribute("page");%>
    <div class="center"
         style="position: fixed;top: 850px;left:  700px;
         font-size:30px;color: saddlebrown;
         background-color: #cccccc; border-radius: 5%;  opacity:0.7;">
    <a href="/mavenPro000_war_exploded/shows-hop?page=1">首页</a>
    <a href="/mavenPro000_war_exploded/shows-hop?page=<%=page1-1%>">上一页</a>
    <a href="/mavenPro000_war_exploded/shows-hop?page=<%=page1+1%>">下一页</a>
</div>
</body>
</html>